body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
   height: 100%;
   width: 100%;
   background-size: cover;
 }
 
 .works-container {
   padding-bottom: 50px;
 }
 
 .clearfix::after {
   content: '';
   display: block;
   clear: both;
 }
 
 .section {
   width: 850px;
   margin: 60px auto;
 }
 
 .section h1 {
   text-align: center;
   font-size: 24px;
   padding-bottom: 10px;
   border-bottom: #3F6580 solid 1px;
 }
 
 .section ul {
   margin-top: 40px;
   padding: 0;
 }
 
 .section ul li {
   float: left;
   list-style: none;
   width: 100px;
   height: 150px;
   margin-right: -20px;
   grid-template-columns: repeat(8, 1fr);
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
   transition: all 0.8s;
   z-index: 1;
   border-left: 2px solid rgba(255, 255, 255, 0.8);
 }
 .section {
   width: auto;
   max-width: 1000px; 
   margin: 60px auto;
   padding: 0 20px;
 }
 
.section ul:hover li {
   width: 120px;
 }
 
 .section ul li:hover {
   width: 150px;
   z-index: 10;
 }
 .section ul li::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 10%;
   height: 100%;
   background: linear-gradient(to right, rgba(255,255,255,0.3), transparent);
   transition: opacity 0.5s;
   opacity: 0;
   pointer-events: none;
 }
 
 .section ul li:hover::before {
   opacity: 1;
 }
 
 .section ul li img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .image_title {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   min-height: 20px;
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
   font-size: x-small;
   text-align: center;
   text-transform: uppercase;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2px 5px;
   box-sizing: border-box;
   transition: all 0.3s ease;
 }
 .title-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
   display: inline-block;
 }
 
 .section ul li:hover .image_title {
   min-height: auto;
   max-height: none;
   background-color: rgba(0, 0, 0, 0.9);
 }
 .section ul li:hover .title-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
 
 
 .work-container {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 .work-image-container {
   width: 100%;
   height: 130px; 
   position: relative;
   overflow: hidden;
 }
 
 .work-image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .image_title a {
   color: #fff;
   text-decoration: none;
   word-break: break-word;
 }
 
 .add-work-card {
   float: left;
   width: 100px;
   height: 150px;
   margin-right: -20px;
   border: 2px dashed #166d80;
   background-color: rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   cursor: pointer;
   transition: transform 0.3s ease;
 }
 .edit-work-btn {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 24px;
   height: 24px;
   background-color: rgba(255, 255, 255, 0.8);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   z-index: 10;
 }
 .add-work-card:hover {
   background-color: rgba(255, 255, 255, 0.2);
   transform: scale(1.4);
   z-index: 10;
 }
 
 .edit-work-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
}
 .add-work-plus {
   font-size: 50px;
   color: #166d80;
   font-weight: bold;
 }
 
 .add-work-card .image_title {
   position: absolute;
   bottom: 0;
   height: 20px;
   background-color: rgba(0, 0, 0, 0.5);
   font-size: x-small;
   width: 100%;
   text-align: center;
   text-transform: uppercase;
   color: #fff;
 }
 